<template>
  <div class="wh" style="">
    <div class="wh" v-if="true" style="display: flex; flex-wrap: wrap;align-content: flex-start;">
      <!-- 点位 -->
      <div style="width: 100%;padding: 0px 10px;">
        <n-alert title="" type="info">
          点击左键开始绘制；shift加右键结束绘制。
        </n-alert>
      
      </div>
      <div style="width: 15%;padding-top: 0px;text-align:right;">
        点：
      </div>
      <div style="width: 85%;display: flex; flex-wrap: wrap;align-content: flex-start;">
        <div>
          <div :style="{ backgroundColor: '' }" class="tianqiitemclass" @click="creatPlot(pin)" title="">
            <!-- <icon-tool :style="{ fontSize: '28px' }" /> -->
            <img :src="'/assets/fenxi/dianwei.png'" alt="" style="width: 30px;filter: invert(100%) brightness(100%);">
          </div>
          <div style="text-align: center;width: 60px;line-height: 14px;">
              {{ '点' }}
          </div>
        </div>
      </div>
      <div style="width: 15%;padding-top: 0px;text-align:right;">
        线：
      </div>
      <div style="width: 85%;display: flex; flex-wrap: wrap;align-content: flex-start;">
        <div v-for="item in linelist.symbols.rows">
          <div :style="{ backgroundColor: '' }" class="tianqiitemclass" @click="creatPlot(item)">
            <img :src="item.thumbnail" alt="" style="filter:opacity(70%)">

          </div>
          <div style="text-align: center;width: 60px;line-height: 14px;">
            {{ item.name }}
          </div>

        </div>
      </div>
      <div style="width: 15%;padding-top: 0px;text-align:right;">
        面：
      </div>
      <div style="width: 85%;display: flex; flex-wrap: wrap;align-content: flex-start;">

        <div v-for="item in polygonlist.symbols.rows">
          <div :style="{ backgroundColor: '' }" class="tianqiitemclass" @click="creatPlot(item)">
            <img :src="item.thumbnail" alt="" style="filter:opacity(70%)">
          </div>
          <div style="text-align: center;width: 60px;line-height: 14px;">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div style="width: 15%;padding-top: 0px;text-align:right;">
        清空：
      </div>
      <div style="width: 85%;display: flex; flex-wrap: wrap;align-content: flex-start;">
        <!-- 清空 -->
        <div :style="{ backgroundColor: '' }" class="tianqiitemclass" @click="qingkongclick()" title="清空">
          <!-- <icon-tool :style="{ fontSize: '28px' }" /> -->
          <img :src="'/assets/fenxi/qingkong.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
        </div>
      </div>

    </div>
  </div>
</template>

<script>
// import ToolItem from '@/components/map/tools/ToolItem.vue'

import xian from './xian.js'
import mian from './mian.js'

import { v1 } from 'uuid'

import _ from "lodash";

import { useMessage } from "naive-ui";

let pickEntity = null
export default {
  name: '',
  components: {
    // ToolItem,
  },
  data() {
    return {
      linelist: xian,
      polygonlist: mian,
      creating: true,
      pin: {content:'{"czmObject":{"name":"Pin1","xbsjType":"Pin"}}'},
      messageReactive: null
    }
  },
  computed: {
  },
  watch: {
    
  },
  mounted() {
    let haslayer = false
    earth.sceneTree.root.children.map(item => {
      if (_.has(item, 'title') && item['title'] == '标绘分组') {
        haslayer = true
      }
    })
    if (!haslayer) {
      earth.sceneTree.root.children.push({
        "title": "标会分组",
        ref: 'plotref',
        children: []
      })
    }
    // 添加提示
    // const message = useMessage();
    // if (!this.messageReactive) {
    //   this.messageReactive = message.info("点击左键开始绘制；shift加右键结束绘制。", {
    //     duration: 10000
    //   });
    //   this.messageReactive.destroy()
    //   // this.messageReactive = null;
    //   console.log(this.messageReactive);
    // }

  },
  beforeDestroy() {
    earth.sceneTree.$refs.plotref.children.map(item => {
      item.destroy()
    })
    // if (this.messageReactive) {
    //   this.messageReactive.destroy();
    //   this.messageReactive = null;
    // }
    
  },
  methods: {
    creatPlot(item) {
      if (this.symbol && this.symbol.czmObject.creating) {
        // 新创建的，没确定之前，又选择了其他图标
        this.symbol.czmObject.destroy();
      }
      var json = JSON.parse(item.content);
      let uuid = v1()
      if (json.czmObject) {
        json.ref = uuid
      }
      earth.sceneTree.$refs.plotref.children.push(json)
      this.symbol = earth.sceneTree.$refs[uuid]
      this.symbol.czmObject.isCreating = true;
      this.symbol.czmObject.creating = true;
    },
    qingkongclick() {
      this.closewindow()
    },
    closewindow() {
      earth.sceneTree.$refs.plotref.children.map(item => {
        item.destroy()
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.wh {
  width: 100%;
  height: 100%;
}

.tianqiitemclass {
  border: 1px solid #fff9;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
  // border-radius: 6px 6px 6px 6px;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;

  &:hover {
    background-color: #068cc088;
  }
}

.zhjx-iconfont {
  font-size: 25px !important;
}
</style>
